<template>
	<div class="container">
		<div class="table-page-search-wrapper">
			<a-form layout="inline" width="100%" :label-col="labelCol0" :wrapper-col="wrapperCol0">
				<a-form-item label="话题名称">
					<a-input placeholder="请输入话题名称" v-model="queryParam.content"></a-input>
				</a-form-item>
				<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
				<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
			</a-form>
			<!-- 操作区 -->
			<div class="table-operator" style="border-top: 5px">
				<a-button type="primary" icon="plus" @click="handleAdd">发起话题</a-button>
			</div>
		</div>
		<!-- 表单区域 -->
		<a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
				 :pagination="pagination" @change="handleTableChange">
			<div slot="action" slot-scope="text, record">
				<a @click="handlelook(record.id)">查看</a>
				<a-divider type="vertical" />
				<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
					<a>删除</a>
				</a-popconfirm>
			</div>
		</a-table>
		<!-- 弹框 -->
		<a-modal title="话题详情" :width="700" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭" style="top:5%;height: 85%;overflow-y: hidden">
			<div class="title">讨论话题</div>
			<div class="subtitle">话题：{{ getoneinfor.content }}</div>
			<div class="cjr">
				<span>创建者：{{ getoneinfor.createName }}</span>
				<span>{{ getoneinfor.createTime }}</span>
			</div>

			<div class="unfinishedfz">
				未完成小组：<span class="itemspan" v-for="(item) in getoneinfor.incompleteGroupList">{{ item.name }}</span>
			</div>
			<div class="itembk" v-for="(item) in getoneinfor.talkInfoList">
				<div class="group0">第一组</div>
				<div class="group1">
					<span class="slogan" v-if="item.slogan">口号：{{ item.slogan }}</span>
					<div class="content">组长：{{ item.studentName }}</div>
				</div>
				<div class="content">
					{{ item.discussion }}
				</div>
				<div class="imglist">
					<div class="imgitem" v-for="(item1) in item.fileList">
						<img :src="seturl(item1.url)" class="img1">
					</div>
				</div>

			</div>
		</a-modal>
		<!-- 弹框 -->
		<a-modal title="话题详情" :width="700" :visible="visible2" @ok="handleOk2" @cancel="handleCancel2" cancelText="关闭" style="top:5%;height: 85%;overflow-y: hidden">
			<a-form-model ref="formmodel" :model="formmodel" :rules="rules">
				<a-form-model-item label="话题内容" prop="content">
					<a-input v-model="formmodel.content" type="textarea" />

				</a-form-model-item>
			</a-form-model>
		</a-modal>

	</div>
</template>

<script>
import { gettablelistfaceTeach, faceTeachgetone, l_talkadd, l_talkdelete } from '@/api/apiz'
export default {
	name: '',
	components: {},
	props: {
		classId: {
			type: String,
			default: ''
		}
	},
	watch: {
		// 监听 classId 的变化
		classId(newVal, oldVal) {
			this.classId = newVal
			this.searchQuery()

		}
	},
	data() {
		return {
			queryParam: {},
			labelCol0: { span: 4 },
			wrapperCol0: { span: 14 },
			dataSource: [],
			columns: [
				{
					title: '序号',
					dataIndex: '',
					key: 'rowIndex',
					width: 60,
					align: "center",
					customRender: function (t, r, index) {
						return parseInt(index) + 1;
					}
				},
				{
					title: '讨论名称',
					align: "center",
					width: 80,
					dataIndex: 'content'
				},
				{
					title: '小组数量',
					align: "center",
					width: 80,
					dataIndex: 'groupNum'
				},
				{
					title: '完成数量',
					align: "center",
					width: 80,
					dataIndex: 'completeNum'
				},
				{
					title: '操作',
					dataIndex: 'action',
					scopedSlots: { customRender: 'action' },
					align: "center",
					width: 170
				}
			],
			pagination: {
				current: 1,
				total: 0,
			},
			visible: false,
			getoneinfor: {},
			visible2: false,
			formmodel: {
				content: ''
			},
			rules: {
				content: [
					{ required: true, message: '请输入话题名称', trigger: 'blur' },
				]
			},

		}
	},
	created() { },
	mounted() {
		this.searchQuery();
	},

	methods: {
		//统一查询
		searchQuery() {
			this.pagination.current = 1
			this.getTableList()
		},
    //重置
    searchReset() {
      this.queryParam = {}
      this.searchQuery()
    },
		//首页列表
		async getTableList() {
			let params = {
				classId: this.classId,
				pageNo: this.pagination.current,
				pageSize: this.pagination.pageSize,
				...this.queryParam,
			}
			let res = await gettablelistfaceTeach(params);
			if (res.code == 200 || res.code == "200") {
				this.dataSource = res.result.records
				this.pagination.total = res.result.total || 0;
			}
		},
		handlelook(id) {
			this.visible = true
			this.getone(id)
		},
		async getone(id) {
			let parms = {
				id: id
			}
			let res = await faceTeachgetone(parms);
			if (res.code == 200 || res.code == '200') {
				this.getoneinfor = res.result || {}
			}
		},
		handleCancel() {
			this.visible = false
		},
		//返回图片url
		seturl(url) {
			return 'https://guopei.bj.bcebos.com' + url
		},
		handleTableChange(pagination, filters, sorter) {
			//分页、排序、筛选变化时触发
			this.pagination = pagination
			this.getTableList()
		},
		//添加话题
		handleAdd() {
			this.visible2 = true
			this.handempty();
			this.resetForm();
		},
		async handleOk2() {
			try {
				let isValid = await this.$refs.formmodel.validate();
				console.log(isValid)
				if (!isValid) {
					return
				}
				this.visible2 = false
				let parms = {
					"id": "",
					"content": this.formmodel.content,
					"classId": this.classId,
					"createBy": "",
					"createTime": "",
					"sysOrgCode": "",
					"viewNum": 0
				}
				let res = await l_talkadd(parms)
				if (res.code == 200 || res.code == '200') {
					this.$message.success("添加成功！");
					this.searchQuery()
				}
			} catch {

			}

		},
		async handleDelete(id) {
			let res = await l_talkdelete({ id: id });
			if (res.code == 200 || res.code == '200') {
				this.$message.success("删除成功！");
				this.searchQuery();
			} else {
				this.$message.error("新增失败！");
			}
		},
		handleCancel2() {
			this.visible2 = false
		},
		/* 重置form */
		resetForm() {
			this.$refs.formmodel.resetFields();
		},
		handempty() {
			this.formmodel = {
				content: ''
			};

		},
    handleOk() {
      this.visible = false
    }

	},
	computed: {}
}
</script>
<style scoped lang='less'>
.container {
	height: 100%;
	background-color: #fff;
	padding: 15px;
}

/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item {
	display: inline-block;
}

.title {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
}

.cjr {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding: 5px;
}

.unfinishedfz {
	display: flex;
	margin-top: 10px;
	margin-right: 10px;
	flex-wrap: wrap;
}

.unfinishedfz .itemspan {
	margin-right: 10px;
}

.itembk {
	padding: 15px 16px;
	background: #fff;
	box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.16);
	border-radius: 3px;
	margin-top: 15px;
	display: -ms-flexbox;
	position: relative;
	min-height: 140px;

	.group0 {
		position: absolute;
		border-radius: 4px 0 16px 0;
		padding: 4px 10px;
		font-size: 12px;
		line-height: 1;
		left: 0;
		top: 0;
		background: #51be34;
		color: #fff;
	}

	.group1 {
		display: flex;
		margin-top: 10px;
		font-size: 16px;
		font-weight: bold;
	}

	.img1 {
		width: 100px;
		height: 100px;
	}

	.imgitem {
		width: 100px;
		height: 100px;
		float: left;
	}
}

.imglist {
	overflow: auto;
}
</style>
